import React, { PureComponent } from 'react';
import { connect } from '@@/plugin-dva/exports';
import styles from './index.less';
import Cookie from '@/utils/cookie.js';
import u291 from './img/u291.png';
import u325 from "./img/u325.png";
import u329 from "./img/u329.png";
import u335 from "./img/u335.png";
import { history } from 'umi';
class HomePage extends PureComponent {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.state = {
      userImg: false,
      openModel: false,
      value: '', // 首页输入框内容
      userId: Cookie.get('userName'),
    }
  }

  //初始化
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'intellectAssistant/updateState',
      payload: {
        isLoading: false,
      }
    });
    dispatch({
      type: 'intellectAssistant/getTop5Hot',
    })
  }
  hotQuestionToNewTalk = (item) => {
    const {dispatch} = this.props;
    const currentUser = Cookie.get('userName');
    console.log(item,"iii")
    if(window.location.pathname!=='/login' && !currentUser){
      dispatch({
        type: 'intellectAssistant/updateState',
        payload:{
          title:item.title,
          dialogueId:"",
          dialogFlag:item?.dialogFlag||"0",
          messageList: []
        },
      })
      history.push({
        pathname: '/login',
      });
    } else {
      dispatch({
        type: 'intellectAssistant/updateState',
        payload:{
          title:item.title,
          dialogueId:"",
          dialogFlag:item?.dialogFlag||"0",
          messageList: []
        }
      })
      history.push({
        pathname: '/newTalk',
      })
    }
  }
  sendMessage = (e)=>{
    if(e.key==="Enter"&&this.state.query){
      this.hotQuestionToNewTalk({title:this.state.query})
    }
  }
 isValidJSON = (jsonString)=> {
    // 检查输入是否为字符串
    if (typeof jsonString !== "string") {
      return false;
    }
    try {
      JSON.parse(jsonString);
      return true;
    } catch (error) {
      return false;
    }
  }
  render() {
    const {hotQuestion} = this.props
    const newData = hotQuestion.map(item=>{
      return  {
        title:this.isValidJSON(item.resp)?JSON.parse(item.resp):item.resp,
        dialogFlag: item?.dialogFlag||0,
      }
    })
    const uniqueArray = [];
      newData.forEach(item=>{
        if(uniqueArray.indexOf(item.resp)===-1){
          uniqueArray.push(item)
        }
      })
    return (
      <div className={styles.content}>
        <div className={styles.icon}>
          <img className={styles.iconStyle} src={u291}></img>
          <div className={styles.iconTip}>来智能取数小助手，你要的全都有...</div>
        </div>
        <div className={styles.sandMessage}>
          <input
            placeholder={'输入你想查的，小助手使用各种能力'}
            autoFocus={true}
            ref={this.inputRef}
            onChange={e => this.setState({query: e.target.value})}
            onKeyDown={e => this.sendMessage(e)}
          />
          <div className={styles.sandMessageImg} onClick={()=>this.hotQuestionToNewTalk({title:this.state.query})}>
            <img src={u325} alt="" />
          </div>
        </div>
        <div className={styles.hot}>
          <img src={u329} alt=""/>
          <div className={styles.tips}>快来看看这些热门问题推荐～</div>
        </div>
        {uniqueArray.map((item,index)=> (
          <div  key={index} className={styles.reCommendation} onClick={()=>this.hotQuestionToNewTalk(item)}>
            <img className={styles.reCommendation_icon} src={u335} alt=""/>
            <div title={item.title} className={styles.reCommendation_title}>{item.title}</div>
          </div>
        ))}
        <div style={{height: '60px'}}></div>
      </div>
    );
  }
}

//这里的bonceChatGpt 是创建models时取的model名   namespace："这里的bonceChatGpt"  umi会自动识别该字段进行如下解构
export default connect(({ intellectAssistant }) => ({
  dialogueList: intellectAssistant.dialogueList,
  hotQuestion: intellectAssistant.hotQuestion,
}))(HomePage);
